<template>
  <!-- 右侧区域 -->
  <article class="right-details">
    <div class="top">详情</div>
    <img class="atlas_img" :src="proItem.thumbnail" alt=" " />
    <p class="atlas_title">
      {{ proItem.fileName }}
    </p>
    <!-- <p class="atlas_title">
      文件大小：
      <span>{{
        proItem.connectionType === 2
          ? proItem.formatFileSize
          : proItem.formatFileSize
      }}</span>
    </p> -->
    <p class="atlas_title" v-if="$route.name != 'presentationData'">
      观看次数：
      <span>{{ proItem.viewNumber }}</span>
    </p>
    <p class="atlas_title" v-if="$route.name != 'presentationData'">
      下载次数：
      <span>{{ proItem.downloads }}</span>
    </p>
    <div class="tags">
      <!-- <div
        v-for="(item, index) in proItem.categoryType"
        :key="index"
        class="tag"
        :class="getTagClass(index)"
      >
        {{ item.name }}
      </div> -->
      <tagsGroup
        @openDialog="openDialog"
        :showAddBtn="false"
        :showTagsArr="proItem.categoryType.map((key) => key.id)"
      ></tagsGroup>
    </div>
    <div>基本详情</div>
    <!-- 图片信息 -->
    <div class="atlas_detils" v-if="proItem.connectionType === 2">
      <p>任务名称: {{ proItem.taskName }}</p>
      <p>侦察对象: {{ proItem.zzdx }}</p>
      <p>侦察手段：{{ proItem.platformName }}</p>
      <p>传感器类型：{{ proItem.sensorName }}</p>
      <p>拍摄时间：{{ proItem.shotDate }}</p>
      <p>图像来源：{{ proItem.source }}</p>
      <!-- <p>地域名称：暂无数据</p> -->
      <p>图像类型：{{ proItem.isProduct === "1" ? "产品" : "素材" }}</p>
      <p>描述信息：{{ proItem.memo }}</p>
    </div>
    <!-- 视频信息 -->
    <div class="atlas_detils" v-if="proItem.connectionType === 3">
      <p>任务名称: {{ proItem.taskName }}</p>
      <p>侦察对象: {{ proItem.zzdx }}</p>
      <p>重要程度：{{ proItem.importanceName }}</p>
      <p>保密等级：{{ proItem.classificationName }}</p>
      <p>传感器类型：{{ proItem.sensorName }}</p>
      <p>主题词：{{ proItem.keywords }}</p>
      <p>地域名称：{{ proItem.regionName }}</p>
      <p>描述信息：{{ proItem.memo }}</p>
    </div>
    <!-- 资料信息 -->
    <div class="atlas_detils" v-if="proItem.connectionType === 1">
      <!-- <p>任务名称: {{ proItem.taskName }}</p> -->
      <!-- <p>侦察对象: {{ proItem.zzdx }}</p> -->
      <p>文件名称：{{ proItem.fileName }}</p>
      <p>文件类型：{{ proItem.fileType }}</p>
      <p>大小：{{ $byteConvert(proItem.fileSize) }}</p>
      <p>页数：{{ proItem.pageNumber }}</p>
      <p>上传时间：{{ proItem.createDate }}</p>
      <p>上传人：{{ proItem.operator }}</p>
    </div>
  </article>
</template>

<script>
import tagsGroup from "@/components/common/tagsGroup.vue";
export default {
  name: "rightDetail",
  components: { tagsGroup },
  props: {
    proItem: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  methods: {
    getTagClass(index) {
      return "tag" + (index % 3);
    },
  },
};
</script>

<style lang="scss">
@import "@/styles/mixin.scss";
//   右侧详情
.right-details {
  @include scrollBar;
  overflow-y: auto;
  height: 94%;
  margin-top: 0.3rem;
  p {
    word-wrap: break-word;
  }
  .top {
    color: #00ccff;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(119, 109, 253, 0.24);
    margin-bottom: 10px;
  }
  .atlas_img {
    height: 1.6rem;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .atlas_title {
    // display: inline-block;
    padding-right: 0.08rem;
    font-weight: 600;
    color: #ffffff80;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    span {
      float: right;
    }
  }
  .tags {
    min-height: 0.4rem;
    background-color: #0686d850;
    border-radius: 10px;
    margin: 0.1rem 0;
    font-size: 0.14rem;
    padding: 3px;
    display: flex;
    flex-wrap: wrap;
    // .tag {
    //   height: 18px;
    //   padding: 0.8px 3px;
    //   margin: 5px;
    //   border-radius: 3px;
    // }
    // .tag0 {
    //   background-color: orange;
    // }
    // .tag1 {
    //   background-color: green;
    // }
    // .tag2 {
    //   background-color: lightskyblue;
    // }
  }
  .atlas_detils {
    font-size: 11px;
    color: #ffffff80;
    p {
      word-wrap: break-word;
      margin: 5px 0;
    }
  }
}
</style>